<template>
  <div v-loading="loading" class="type-wrap">
    <el-table v-if="tableData.length" :data="tableData" style="width: 100%" border>
      <el-table-column prop="index" label="序号" min-width="180"/>
      <el-table-column prop="name" label="数据类型" min-width="180"/>
      <el-table-column prop="id" label="ID" min-width="180"/>
      <el-table-column prop="code" label="编码" min-width="180"/>
      <el-table-column prop="state" label="状态" min-width="180">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.state === 1" type="success">正常</el-tag>
          <el-tag v-show="scope.row.state === 0" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="switch" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleDelete(scope)">查看子类型</el-button>
          <el-button type="primary" @click="handleModification(scope)">修改类型</el-button>
          <el-button type="primary" @click="handleAddItem(scope)">添加子类型</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogFormVisible" title="修改类型">
      <el-form :model="form">
        <el-form-item label="数据ID" label-width="200px">
          <el-input v-model="form.id" :readonly="true" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="数据名称" label-width="200px">
          <el-input v-model="form.name" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="排序码" label-width="200px">
          <el-input v-model="form.codesort" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="状态" label-width="200px">
          <el-radio v-model="form.state" label="1">正常</el-radio>
          <el-radio v-model="form.state" label="0">禁用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogAddVisible" title="添加子类型">
      <el-form :model="child">
        <el-form-item label="数据ID" label-width="200px">
          <el-input v-model="child.id" :readonly="true" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="编码" label-width="200px">
          <el-input v-model="child.code" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="排序码" label-width="200px">
          <el-input v-model="child.codesort" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="名称" label-width="200px">
          <el-input v-model="child.name" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
    <router-view />
  </div>
</template>
<script>
import { findChild, update, addDictionary, checkCode } from '@/api/data'
export default {
  name: 'BasicType',
  data() {
    return {
      value: '',
      list: [],
      pid: -1,
      form: {
        id: '',
        name: '',
        state: '1',
        codesort: '',
        code: ''
      },
      child: {
        id: '',
        name: '',
        codesort: '',
        code: ''
      },
      dialogFormVisible: false,
      dialogAddVisible: false,
      loading: false
    }
  },
  computed: {
    tableData() {
      const result = []
      this.list.map((item, index) => {
        if (!isNaN(Number(item.code))) {
          result.push({
            index: index + 1,
            id: item.id,
            name: item.name,
            code: item.code,
            state: item.state,
            codesort: item.codesort
          })
        }
      })
      return result
    }
  },
  created() {
    this.getType()
  },
  methods: {
    handleDelete(scope) {
      const { id } = scope.row
      this.$router.push({
        path: '/basic/type/detail',
        query: {
          id: escape(id)
        }
      })
    },
    getType() {
      const pid = this.pid
      this.loading = true
      findChild(pid)
        .then((res) => {
          res = res.data
          this.list = res
          this.loading = false
        }).catch((res) => {
          this.$message.warning({
            duration: 1000,
            message: res.msg
          })
          this.loading = false
        })
    },
    handleModification(scope) {
      this.dialogFormVisible = true
      const { id, name, codesort } = scope.row
      this.form = {
        id,
        name,
        codesort
      }
      this.form.state = scope.row.state.toString()
    },
    check() {
      const { id, name } = this.form
      if (id.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: 'id不能为空'
        })
        return false
      }
      if (name.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '名称不能为空'
        })
        return false
      }
      return true
    },
    handleSubmit() {
      const flag = this.check()
      flag ? this.modification() : ''
      this.dialogFormVisible = false
    },
    modification() {
      const { id, name, codesort, state } = this.form
      update(id, name, codesort, state)
        .then((res) => {
          if (res.success) {
            this.$message.success({
              duration: 1000,
              message: '修改成功'
            })
            this.getType()
          } else {
            this.$message.warning({
              duration: 1000,
              message: '稍后再试'
            })
          }
        }).catch((e) => {
          this.$message.warning({
            duration: 1000,
            message: '稍后再试'
          })
        })
    },
    handleAddItem(scope) {
      const { id } = scope.row
      this.child = {
        id
      }
      this.dialogAddVisible = true
    },
    handleAdd() {
      const flag = this.checkChild()
      flag ? this.checkData() : ''
    },
    checkChild() {
      const { id, name } = this.child
      if (id.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '数据ID不能为空'
        })
        return false
      }
      if (name.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '名称不能为空'
        })
        return false
      }
      if (name.trim() === '') {
        this.$message.warning({
          duration: 1000,
          message: '名称不能为空'
        })
        return false
      }
      return true
    },
    checkData() {
      const { code } = this.child
      checkCode(code)
        .then((res) => {
          if (res.success) {
            this.addData()
          } else {
            this.$message.warning({
              duration: 1000,
              message: res.msg
            })
            return
          }
        }).catch((res) => {
          this.$message.warning({
            duration: 1000,
            message: '请稍后再试'
          })
        })
    },
    addData() {
      const { name, code } = this.child
      const pid = this.child.id
      addDictionary(pid, code, name)
        .then((res) => {
          res = res.data
          this.$message.success({
            duration: 1000,
            message: '添加成功'
          })
        }).catch((res) => {
          res = res.data
          this.$message.warning({
            duration: 1000,
            message: res.msg
          })
        })
      // this.dialogAddVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.type-wrap {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>
